<!-- 首页 -->
<template>
	<view>
		<view class="tip-box">
			<span>一、先点击第一个按钮转发给好友或群聊</span>
			<span>二、转发后点击第二个按钮解锁资源</span>
			<span>三、每邀请一人注册可领取200趣豆</span>
		</view>
		<view class="ad-btn-box">
			<u-button type="primary" open-type="share" class="ad-btn" :custom-style="customStyle">转发好友帮助解锁</u-button>
			
			<u-button type="primary" class="ad-btn" @click="openBtn"  :custom-style="customStyle2">转发成功解锁资源</u-button>
		</view> 
	</view>
</template>

<script>
import {mapState} from 'vuex';
export default {
	props: {
		title: {
			type: String,
			default () {
				return "每邀请一人可领取200趣豆";
			}
		},
		btnText: {
			type: String,
			default () {
				return "转发好友";
			}
		},
	},
	data() {
		return {
			currentIndex: 0,
			cashCoin: 0,
			disabled: true,
			customStyle: {
				display: 'flex',
				flex: '1',
				background: '#649f40',
			},
			customStyle2: {
				marginTop: '15px',
				display: 'flex',
				flex: '1',
				background: '#649f40',
			},
			dataList: [
				{
					'coin': 200,
					active: true,
				},
				{
					'coin': 2000,
					active: false,
				},
				{
					'coin': 4000,
					active: false,
				},
				{
					'coin': 10000,
					active: false,
				},
				{
					'coin': 20000,
					active: false,
				},
				{
					'coin': 40000,
					active: false,
				}
			]
		};
	},
	methods: {
		init() {
			
		},
		cannel() {
			this.$emit('cannel');
		},
		openBtn() {
			var adClik = uni.getStorageSync("adClick");
			uni.$emit('test', adClik);
		},
	}
}; 
</script>
<style lang="scss" scoped>
	.label {
		margin-bottom: 15px;
		font-size: 14px;
		font-weight: bold;
	}
	.amount {
		font-size: 30rpx;
		font-weight: bold;
	}
	.coin-box {
		padding: 15px;
	}
	.coin-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}
	.record {
		font-size: 20rpx;
		line-height: 20px;
		color: #303133;
		background: #c0c4cc;
		padding: 3px 10px;
		border-radius: 3px;
		font-weight: bold;
	}
	.coin-tip {
		font-size: 28rpx;
		color: red;
		font-weight: bold;
		padding: 15px;
		display: flex;
		justify-content: center;
		background: #ffeaea;
	}
	.confrim-btn {
		padding: 15px;
		display: flex;
		justify-content: space-between;
	}
	.ad-btn-box {
		padding: 15px;
		display: flex;
		justify-content: center;
		flex: 1;
		flex-direction: column;
		margin-bottom: 100px;
	}
	.ad-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.vip-tab-box {
		display: flex;
		align-items: center;
		padding: 20px 15px;
		justify-content: space-between;
		margin-bottom: 15px;
		background-image: linear-gradient(180deg, #f9a470, #db854e);
		border-radius: 10px;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
	}
	.card-num-box {
		display: flex;
		flex-wrap: wrap;
	}
	.card-num-border {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 33.3%;
		padding-right: 10px;
		margin-bottom: 10px;
	}
	.card-num {
		border: 4px solid #f5e8e8;
		color: #858585;
		font-size: 14px;
		font-weight: bold;
		border-radius: 10px;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		padding: 20px 0px;
	}
	.card-num-box .active {
		border: 8rpx solid #e09049;
		color: #e09049;
	}
	.card-num-box .card-num-border:nth-child(3n) {
		padding-right: 0;
	}
	.info-box {
		padding: 15px 0;
		font-size: 28rpx;
	}
	.tip-box{
		padding: 15px;
		padding-bottom: 0;
		font-size: 36rpx;
		font-weight: bolder;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.yq {
		animation: btnScaleAni 3.5s infinite;
	}
	.ad-btn-box {
		padding: 15px;
		display: flex;
		justify-content: center;
		flex: 1;
	}
	.ad-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	@keyframes btnScaleAni {
	  0%{ transform: scale(.85); opacity: .6; }
	  50%{ transform: scale(1); opacity: 1; }
	  100%{ transform: scale(.85); opacity: .6; }
	}
</style>
